<template>
  <div>
    <div>
      <!-- <h3 class="h3title">授信支用</h3> -->
      <TitleContainer spot="授信支用" />
      <el-table
        :data="tableData"
        :expand-row-keys="expandRowKeys"
        row-key="apply_risk_id"
        @expand-change="expandChange"
        height="350"
        stripe
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" inline class="demo-table-expand">
              <el-table
                :data="props.row.son"
                v-loading.body="tableLoading"
                element-loading-text="拼命加载中"
                fit
                highlight-current-row
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  prop="apply_id"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="申请支用时间"
                  prop="apply_create_at"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="申请支用金额"
                  prop="apply_amount"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="日利率"
                  prop="product_interest_day_rate"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="还款期数"
                  prop="asset_period_count"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="还款方式"
                  prop="product_repay_type_str"
                  align="center"
                ></el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="授信ID"
          prop="apply_risk_id"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          label="申请时间"
          prop="apply_risk_created_at"
          align="center"
        ></el-table-column>
        <el-table-column
          label="授信时间"
          prop="apply_risk_finished_at"
          align="center"
        ></el-table-column>
        <el-table-column
          label="授信失效时间"
          prop="valid_period"
          align="center"
        ></el-table-column>
        <el-table-column
          label="授信金额"
          prop="apply_risk_amount"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="综合费率"
          prop="rate"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column label="授信结果" align="center" width="100px">
          <template slot-scope="scope">
            <span :class="scope.row.apply_risk_result">{{
              scope.row.apply_risk_result_str
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <a
              href="javascript:void(0)"
              v-if="scope.row.apply_risk_result === 'pass'"
              @click="handleGetDrawList(scope.row.apply_risk_id, scope)"
              >支用历史</a
            >
            <a href="javascript:void(0)" @click="getDecisionDetail(scope.row)"
              >决策详情</a
            >
          </template>
        </el-table-column>
      </el-table>
      <!--<div class="pagination-container">-->
      <!--<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
      <!--:current-page.sync="tableQuery.current_page" :page-sizes="[10, 20, 50]"-->
      <!--:page-size="tableQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">-->
      <!--</el-pagination>-->
      <!--</div>-->

      <div class="risk-detail-box">
        <!-- <h2>决策详情</h2> -->
        <TitleContainer spot="决策详情" />
        <div class="bock-container">
          <span class="bock">授信ID：{{ riskDetail.apply_risk_id }}</span>
          <span class="bock"
            >授信结果：{{ riskDetail.apply_risk_result_str }}</span
          >
          <span class="bock">授信金额：{{ riskDetail.apply_risk_amount }}</span>
          <span class="bock"
            >授信时间：{{ riskDetail.apply_risk_created_at }}</span
          >
          <!-- 支用次数：2次 -->
        </div>
      </div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span style="line-height: 24px;">反欺诈检测</span>
            </div>
            <div style="height: 40vh;overflow-x:hidden; overflow-y: auto;">
              <el-row
                :gutter="20"
                v-for="(item, index) in ruleLogData"
                :key="index"
              >
                <el-col :span="15" class="antiCheat-value">{{
                  item.rule_alias
                }}</el-col>
                <el-col
                  :span="9"
                  class="antiCheat-status"
                  :class="!~~item.rule_result ? '' : 'red'"
                >
                  <i
                    :class="
                      !~~item.rule_result
                        ? 'el-icon-circle-check-outline'
                        : 'el-icon-circle-close-outline'
                    "
                  ></i>
                  {{ !~~item.rule_result ? '通过' : '未通过' }}
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span style="line-height: 24px;">
                征信专家模型分（{{ modelName }}）</span
              >
            </div>
            <div style="height: 40vh">
              <gauge-chart
                width="100%"
                height="100%"
                :chartConfig="yuanFangConfig"
              ></gauge-chart>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="display: none">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span style="line-height: 24px;">综合评估</span>
            </div>
            <div style="height: 40vh">
              <!--<radar-chart width="100%" height="100%" :chartConfig="assessConfig"></radar-chart>-->
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- <h3 class="h3title">资料分类</h3> -->
      <TitleContainer spot="资料分类" />

      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="基本信息">
          <div class="source-container" :data="ocrInfoData">
            <div class="item">
              <span class="item-label">姓名：</span>
              <span class="item-value">{{ ocrInfoData.ocr_name }}</span>
            </div>
            <div class="item">
              <span class="item-label">身份证号：</span>
              <span class="item-value">{{ ocrInfoData.ocr_identity }}</span>
            </div>
            <div class="item">
              <span class="item-label">性别：</span>
              <span class="item-value">{{ ocrInfoData.ocr_sex }}</span>
            </div>
            <div class="item">
              <span class="item-label">民族：</span>
              <span class="item-value">{{ ocrInfoData.ocr_nation }}</span>
            </div>
            <div class="item">
              <span class="item-label">出生日期：</span>
              <span class="item-value">{{ ocrInfoData.ocr_birth }}</span>
            </div>
            <div class="item">
              <span class="item-label">地址：</span>
              <span class="item-value">{{ ocrInfoData.ocr_address }}</span>
            </div>
            <div class="item">
              <span class="item-label">签发机关：</span>
              <span class="item-value">{{ ocrInfoData.ocr_authority }}</span>
            </div>
            <div class="item">
              <span class="item-label">有效期：</span>
              <span class="item-value">{{ ocrInfoData.ocr_valid_date }}</span>
            </div>
            <div class="item">
              <span class="item-label">是否有效：</span>
              <span class="item-value">{{
                !~~ocrInfoData.ocr_valid ? '无效' : '有效'
              }}</span>
            </div>
            <div class="item">
              <span class="item-label">创建时间：</span>
              <span class="item-value">{{ ocrInfoData.ocr_create_at }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="银行卡信息">
          <el-table
            :data="bankCardData"
            v-loading.body="tableLoading"
            element-loading-text="拼命加载中"
            stripe
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              label="银行卡号"
              prop="card_num"
              align="center"
            ></el-table-column>
            <el-table-column
              label="开卡银行"
              prop="card_bank_name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="卡类型"
              prop="crd_type_text"
              align="center"
            ></el-table-column>
            <el-table-column
              label="绑卡更新时间"
              prop="individual_card_update_at"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="证件图片">
          <el-row :gutter="20">
            <el-col :span="12" style="padding-left: 30px">
              <h4 class="h4title">身份证正面</h4>
              <img
                :src="ocrInfoData.imgs && ocrInfoData.imgs.idcard_face"
                alt=""
                class="idcardImg"
              />
            </el-col>
            <el-col :span="12" style="padding-left: 30px">
              <h4 class="h4title">身份证反面</h4>
              <img
                :src="ocrInfoData.imgs && ocrInfoData.imgs.idcard_back"
                alt=""
                class="idcardImg"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <!--<el-tab-pane label="信用报告">信用报告</el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script>
// import { formatTime, shortcutsOptions } from 'utils'
// import radarChart from 'components/Charts/radarChart'
import TitleContainer from '@/components/title/TitleContainer.vue'

// import gaugeChart from 'components/Charts/gaugeChart'

export default {
  name: 'riskInfo',
  data() {
    return {
      tableLoading: true,
      tableData: [],
      antiCheatData: [],
      ocrInfoData: {},
      ruleLogData: [],
      yuanFangConfig: {},
      assessConfig: {},
      tabPosition: 'left',
      riskDetail: {},
      score: 0,
      expandRowKeys: [],
      drawData: [],
      bankCardData: [],
      modelName: ''
    }
  },
  mounted() {
    this.getList()
    //this.getRuleLog();
    this.getOcrInfo()
    this.getBankCardInfo()
  },
  components: {
    // radarChart,
    // gaugeChart,
    TitleContainer
  },
  methods: {
    //授信支用
    getList() {
      this.tableLoading = true
      this.$api.userReport.info
        .applyRiskList({
          params: {
            id: this.$route.query.uid,
            apply_code: this.$route.query.apply_code,
            limit: 10,
            current_page: 1
          }
        })
        .then(response => {
          let data = response.data.data
          let scoreRow = data[0]
          data.forEach((item, index) => {
            item.isExpand = false
          })
          this.expandRowKeys.push(data.id)
          this.tableData = data
          this.tableLoading = false
          this.getDecisionDetail(scoreRow)
          this.getRuleLog(scoreRow.apply_risk_id)
          // 隐藏箭头
          setTimeout(() => {
            this.hideExpand()
          }, 100)
        })
        .catch(error => {
          this.tableLoading = false
          this.$message.error(error)
        })
    },
    //规则日志
    getRuleLog(id) {
      this.tableLoading = true
      this.$api.userReport.info
        .applyRiskRuleLog({
          params: {
            apply_risk_id: id
          }
        })
        .then(response => {
          this.ruleLogData = response.data.data
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
          this.$message.error(error)
        })
    },
    //ocr信息
    getOcrInfo() {
      this.tableLoading = true
      this.$api.userReport.info
        .ocrInfo({
          params: {
            id: this.$route.query.uid,
            apply_code: this.$route.query.apply_code
          }
        })
        .then(response => {
          this.ocrInfoData = response.data.data
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
          this.$message.error(error)
        })
    },
    //银行卡信息
    getBankCardInfo() {
      this.tableLoading = true
      this.$api.userReport.info
        .cardList({
          params: {
            id: this.$route.query.uid,
            apply_code: this.$route.query.apply_code
          }
        })
        .then(response => {
          this.bankCardData = response.data.data
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
          this.$message.error(error)
        })
    },
    //支用历史展开收缩
    expandChange(...arg) {
      console.log(arg)
    },
    handleGetDrawList(uid, scope) {
      if (this.expandRowKeys.indexOf(uid) > -1) {
        return (this.expandRowKeys = [])
      }

      this.expandRowKeys = []
      this.getDrawList(
        {
          apply_risk_id: uid
        },
        scope.$index
      )
    },
    // 隐藏箭头
    hideExpand() {
      let cell = document.querySelectorAll('.el-table__expand-column .cell')
      console.log(cell)
      if (cell.length) {
        for (let i = 0; i < cell.length; i++) {
          cell[i].style.display = 'none'
        }
      }
    },
    //支用历史数据
    getDrawList(data, $index) {
      this.$api.userReport.info
        .drawList({
          params: data
        })
        .then(response => {
          this.expandRowKeys.push(data.apply_risk_id)
          this.tableData.map((item, index) => {
            if (index === $index) {
              item.son = response.data.data
            }
          })
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    //决策详情echarts数据
    getDecisionDetail(row) {
      this.modelName = row.apply_risk_score_name || ''
      let score = row.apply_risk_score || this.score
      this.getRuleLog(row.apply_risk_id)
      Object.assign(this.riskDetail, row)
      // let antiCheatData = ['敏感职业','信息完整性检测','敏感职业','信息完整性检测','敏感职业','信息完整性检测']
      let chartConfig = {
        legend: {
          data: []
        },
        series: [
          {
            name: '',
            type: 'gauge',
            startAngle: 225,
            endAngle: -45,
            center: ['50%', '50%'], //整体的位置设置
            z: 3,
            min: 0,
            max: 1000,
            splitNumber: 5,
            radius: '80%',
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10,
                color: [[0.75, '#EE4444'], [1, '#ddd']]
              }
            },
            axisTick: {
              // 坐标轴小标记
              show: false
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#454A57',
                fontSize: '14'
              }
            },
            pointer: {
              show: true,
              length: '70%',
              width: 5,
              color: '#EE4444'
            },
            itemStyle: {
              normal: {
                color: '#EE4444',
                borderWidth: 0
              }
            },
            title: {
              //仪表盘标题
              show: true,
              offsetCenter: ['0', '90%'],
              textStyle: {
                color: '#444A56',
                fontSize: 14
              }
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, '110%'],
              color: '#EE4444',
              formatter: function(params) {
                return params
              },
              textStyle: {
                fontSize: 24
              }
            },
            data: [{ value: score, name: '计算结果' }]
          }
        ]
      }
      this.yuanFangConfig = {
        title: '',
        backgroundColor: chartConfig.backgroundColor,
        legendData: chartConfig.legend.data,
        seriesData: chartConfig.series
      }
    }
  }
}
</script>

<style scoped>
.hide {
  display: none;
}
.h3title {
  margin: 30px 0;
}
.h4title {
  font-weight: normal;
  font-size: 16px;
  line-height: 36px;
  margin: 0 auto;
}
.blueFont {
  color: #006dcc;
}
.refuse,
.exception,
.manual {
  color: #ff4d51;
}
.antiCheat-value {
  font-size: 14px;
  text-align: right;
  line-height: 30px;
}
.antiCheat-status {
  font-size: 14px;
  color: #00ff00;
  line-height: 30px;
}
.antiCheat-status.red {
  color: #ff0000;
}
.source-container {
  padding-left: 30px;
}
.item {
  font-size: 14px;
  color: #555;
  margin: 12px 0;
  overflow: hidden;
}
.item-label {
  width: 100px;
  display: inline-block;
  line-height: 24px;
  color: #555;
}
.item-value {
  display: inline-block;
  line-height: 24px;
  padding-left: 10px;
  color: #888;
}
.btn-detail {
  cursor: pointer;
}
.idcardImg {
  max-height: 400px;
  max-width: 300px;
}
.risk-detail-box h2 {
  font-size: 20px;
}
.bock {
  padding-right: 20px;
}
.bock-container {
  margin: 10px 0;
  font-size: 14px;
}
.table-container {
  margin-bottom: 20px;
}
</style>
